<template>
    <div>
        <n-modal v-if="props.showModal" v-model:show="props.showModal" :mask-closable="true" @update:show="$emit('CheckShowModal', false)">
            <n-card style="width: 600px" title="添加办公室" :bordered="false" size="huge" role="dialog" aria-modal="true">
                <template #header-extra>
                    <n-button type="error" @click="$emit('CheckShowModal', false)">
                        X
                    </n-button>
                </template>
                <n-form ref="formRef" :model="model" :rules="rules">
                    <n-form-item path="uName" label="门牌号">
                        <n-input v-model:value="model.oNum" placeholder="请输入门牌号" />
                    </n-form-item>
                    <n-form-item path="nLevell" label="办公室名称">
                        <n-input v-model:value="model.oName" placeholder="请输入办公室名称"/>
                    </n-form-item>
                    <n-form-item path="URL" label="电话">
                        <n-input v-model:value="model.oTel"  placeholder="请输入号码" />
                    </n-form-item>
                    <n-form-item path="URL" label="主任ID">
                        <n-input v-model:value="model.uId"  placeholder="请输入主任ID" />
                    </n-form-item>
                    <n-form-item path="URL" label="职能">
                        <n-input v-model:value="model.oInfo"  placeholder="请输入职能" />
                    </n-form-item>
                    <n-row :gutter="[0, 24]">
                        <n-col :span="24">
                            <div style="display: flex; justify-content:center">
                                <n-button round type="primary" @click="UpdateUserFile">
                                    添加
                                </n-button>
                            </div>
                        </n-col>
                    </n-row>
                </n-form>
            </n-card>
        </n-modal>

        <n-skeleton v-else text :repeat="2" /> <n-skeleton text style="width: 60%" />
    </div>
</template>

<script lang="ts" setup>
import { defineProps, ref, reactive } from 'vue';
import {addDept} from "@/api/dept"
const formRef = ref();
const emit = defineEmits(['CheckShowModal','reloadpage'])
const props = defineProps({
    showModal: {
        type: Boolean,
        default: false
    }
})

const model = reactive({
    oNum:'',
    oName: '',
    uId: '',
    oTel: '',
    uIds: '',
    oInfo:''
})

const rules = {
    oNum: [
        {
            required: true,
            message: '请输入门牌号',
            trigger: ['input', 'blur']
        }
    ],
    oName: [
        {
            required: true,
            message: '请输入办公室名称',
            trigger: ['input', 'blur']
        }
    ],
    oTel: [
        {
            required: true,
            message: '请输电话',
            trigger: ['input', 'blur']
        }
    ],
    uId: [
        {
            required: true,
            message: '请输入主任ID',
            trigger: ['input', 'blur']
        },
    ],
    oInfo: [
        {
            required: true,
            message: '请输入职能',
            trigger: ['input', 'blur']
        },
    ]
}

const UpdateUserFile = (e:Event) => {
    e.preventDefault()
    formRef.value.validate((err:any)=>{
        if(err){
            console.log(err)
        }else{
            addDept(model).then((res: any) => {
                emit('CheckShowModal',false)
                emit('reloadpage')
            })
        }
    })
}
</script>

<style scoped lang=scss>

</style>